/**
 *  房间管理
 */
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import Quote from "components/Typography/Quote.jsx";
import Muted from "components/Typography/Muted.jsx";
import Primary from "components/Typography/Primary.jsx";
import Info from "components/Typography/Info.jsx";
import Success from "components/Typography/Success.jsx";
import Warning from "components/Typography/Warning.jsx";
import Danger from "components/Typography/Danger.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardBody from "components/Card/CardBody.jsx";

import MaterialTable from "material-table";
import axios from 'axios';

const style = {
  typo: {
    paddingLeft: "25%",
    marginBottom: "40px",
    position: "relative"
  },
  note: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    bottom: "10px",
    color: "#c0c1c2",
    display: "block",
    fontWeight: "400",
    fontSize: "13px",
    lineHeight: "13px",
    left: "0",
    marginLeft: "20px",
    position: "absolute",
    width: "260px"
  },
  cardCategoryWhite: {
    color: "rgba(255,255,255,.62)",
    margin: "0",
    fontSize: "14px",
    marginTop: "0",
    marginBottom: "0"
  },
  cardTitleWhite: {
    color: "#FFFFFF",
    marginTop: "0px",
    minHeight: "auto",
    fontWeight: "300",
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    marginBottom: "3px",
    textDecoration: "none"
  }
};

var roomdata = []
new Promise(resolve => {
  setTimeout(() => {
    resolve();
    let url = "/room/all"
    axios.post(url)
      .then(function (response) {
        let data = response.data
        roomdata = data;
        axios.post("/room/allRoomtype")
          .then(function (response) {
            let data = response.data;
            console.log("room" + data);
            roomdata.newParam = 'roomType_id';

            for (let i = 0;i < data.length;i++) {
              roomdata[i].roomType_id = data[i].id;
            }
            console.log("roomTypeList:", roomdata);
          })
          .catch(function (error) {
            console.log("error", error);
          });
        console.log("roomList:", roomdata);
      })
      .catch(function (error) {
        console.log("error", error);
      });

    // axios.post("/room/allRoomtype")
    //   .then(function (response) {
    //     let data = response.data;
    //     console.log("room" + data);
    //     roomdata.newParam = 'roomType_id';

    //     for (let i = 0;i < data.length;i++) {
    //       roomdata[i].roomType_id = data[i].id;
    //     }
    //     console.log("roomTypeList:", roomdata);
    //   })
    //   .catch(function (error) {
    //     console.log("error", error);
    //   });

  }, 600);
});

function TypographyPage(props) {
  const { classes } = props;
  const [state, setState] = React.useState({
    columns: [
      { title: '编号', field: 'id', editable: 'onAdd' },
      {
        title: '是否可预订',
        field: 'canRent',
        lookup: { true: '可预订', false: '不可预订' },
      },
      { title: '房号', field: 'location', editable: 'onAdd' },
      {
        title: '是否已被预订',
        field: 'rent',
        // editable: 'never',
        lookup: { true: '已被预订', false: '未被预订' }
      },
      {
        title: '房间类型',
        field: 'roomType_id',
        // editable: 'never',
        lookup: { 1: '标准单人房', 2: '特惠单人房', 3: '商务大床房', 4: '豪华大床房' }
      },
    ],
    data: roomdata,
  });
  return (
    <Card>
      <CardHeader color="primary">
        <h4 className={classes.cardTitleWhite}>房间管理</h4>
        <p className={classes.cardCategoryWhite}>
          在这里，你可以设置添加房间和设置房间是否可租用
        </p>
      </CardHeader>
      <CardBody>
        <MaterialTable

          title=" "
          columns={state.columns}
          data={state.data}
          setState="true"
          editable={{
            onRowAdd: newData =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  {
                    const data = [...state.data];
                    let saveurl = "/room" + "/" + newData.roomType_id;
                    console.log(saveurl)
                    axios.post(saveurl, newData)
                      .then(function (response) {
                        let data = response.data
                        // alert(data);
                        // console.log("data:",data);
                        console.log("res:", response);
                      })
                      .catch(function (error) {
                        console.log("error", error);
                      });
                    data.push(newData);
                    setState({ ...state, data });
                  }
                  resolve()
                }, 1000)
              }),
            onRowUpdate: (newData, oldData) =>
              new Promise(resolve => {
                setTimeout(() => {
                  resolve();
                  // console.log("hahah", data);
                  // console.log(newData)
                  const data = [...state.data];
                  data[data.indexOf(oldData)] = newData;
                  console.log("data", newData)
                  let saveurl = "/room" + "/" + newData.roomType_id;
                  console.log(saveurl)
                  axios.post(saveurl, newData)
                    .then(function (response) {
                      let data = response.data
                      // alert(data);
                      // console.log("data:",data);
                      console.log("res:", response);
                    })
                    .catch(function (error) {
                      console.log("error", error);
                    });
                  setState({ ...state, data });
                }, 600);
              }),
            // onRowDelete: oldData =>
            //     new Promise(resolve => {
            //         setTimeout(() => {
            //             resolve();
            //             const data = [...state.data];
            //             data.splice(data.indexOf(oldData), 1);
            //             setState({ ...state, data });
            //         }, 600);
            //     }),
          }}
        />
      </CardBody>
    </Card>
  );
}

TypographyPage.propTypes = {
  classes: PropTypes.object
};

export default withStyles(style)(TypographyPage);
